<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>

<!--页面内容开始-->
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-8">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>待报销单据</h5>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <div class="m-l-xs toolbar" id="pzcurmainToexpense_table_toolbar">
                            <form class="form-inline" id="pzcurmainToexpense_Form">
                                <div class="form-group m-r-xs">
                                    <label for="pzcurmainToexpense_applyCode" class="sr-only">单据编号</label>
                                    <input type="text" class="form-control" id="pzcurmainToexpense_applyCode"
                                           name="applyCode" placeholder="单据编号">
                                </div>
                                <div class="form-group m-r-xs">
                                    <label for="pzcurmainToexpense_moneyStart" class="sr-only">金额范图</label>
                                    <div class="input-daterange input-group">
                                        <input type="number" class="form-control" style="width: 150px"
                                               id="pzcurmainToexpense_moneyStart" name="moneyStart" placeholder="最小金额">
                                        <span class="input-group-addon">至</span>
                                        <input type="number" class="form-control" style="width: 150px"
                                               id="pzcurmainToexpense_moneyEnd" name="moneyEnd" placeholder="最大金额">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-white m-r-xs" type="button"
                                            onclick="pzcurmainToexpenseObj.refreshDataList()">查询
                                    </button>
                                    <button class="btn btn-white m-r-xs" type="button"
                                            onclick="pzcurmainToexpenseObj.resetDataList()">清空
                                    </button>
                                    <button class="btn btn-sm btn-primary" type="button"
                                            onclick="pzcurmainToexpenseObj.addOrUpdateHandle()"><i
                                            class="fa fa-plus"></i>&nbsp;新增报销单
                                    </button>
                                </div>
                            </form>
                        </div>
                        <table id="pzcurmainToexpense_table" class="table table-striped"></table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>合并报销</h5>
                    <p>勾选左侧单据进行合并报销，适用于多个事前请示，报销发票为一张的情况</p>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <div class="m-l-xs toolbar" id="pzcurmainToexpense_table_merge_toolbar">
                            <button class="btn btn-sm btn-primary" type="button"
                                    onclick="pzcurmainToexpenseObj.saveForExpenseMerge()"><i
                                    class="fa fa-save"></i>&nbsp;合并报销
                            </button>
                        </div>
                        <table id="pzcurmainToexpense_table_merge" class="table table-striped"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--弹窗：人员选择-->
<div class="modal inmodal fade" id="pzcurmainToexpense_Modal"
     tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="pzcurmainToexpense_modalTitle">选择人员</h4>
                <p id="pzcurmainToexpense_modalDesc" class="font-bold text-danger"></p>
            </div>
            <div class="modal-body">
                <div class="m-l-xs toolbar text-danger" id="pzcurmainToexpense_table_user_toolbar">
                    搜索后显示结果
                </div>
                <table id="pzcurmainToexpense_table_user" class="table table-striped"></table>
                <div class="pull-right">
                    <button type="submit" class="btn btn-primary"
                            onclick="pzcurmainToexpenseObj.saveAuthHandler()">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页面内容结束-->
<script type="text/javascript">
    $().ready(function () {
        pzcurmainToexpenseObj.myTable = $('#pzcurmainToexpense_table').bootstrapTable({
            toolbar: '#pzcurmainToexpense_table_toolbar',
            pagination: true,
            sidePagination: 'server',
            uniqueId: 'id',
            clickToSelect: true,
            queryParams: function (params) {
                params.state = 3;
                params.isExpense = 0;
                return params;
            },
            formatNoMatches: function () {  //没有匹配的结果
                return '暂无数据';
            },
            columns: [{
                title: '#',
                align: 'center',
                checkbox: true,
                width: 50,
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                title: '单据号',
                width: '100',
                field: 'applyCode',
                formatter: function (value, row, index) {
                    return `<a href="/portal/process/instance2/viewProcess.html?id=${row.id}" target="_blank" data-toggle="tooltip" data-placement="top" title="${row.reason}">${value}</a>`;
                }
            }, {
                title: '标题',
                width: '100',
                field: 'title'
            }, {
                title: '金额',
                width: '80',
                field: 'money',
                formatter: function (value, row, index) {
                    return $.moneyFormat(value);
                }
            }, {
                title: '申请日期',
                width: '120',
                field: 'applyDate'
            }, {
                title: '操作',
                width: 100,
                events: {
                    'click .createExpense': function (e, value, row, index) {
                        pzcurmainToexpenseObj.selectId = row.id;
                        pzcurmainToexpenseObj.createExpenseHandle()
                    },
                    'click .createExpenseForAddendum': function (e, value, row, index) {
                        pzcurmainToexpenseObj.selectId = row.id;
                        pzcurmainToexpenseObj.createExpenseForAddendumHandle()
                    },
                    'click .authTo': function (e, value, row, index) {
                        pzcurmainToexpenseObj.selectId = row.id;
                        pzcurmainToexpenseObj.toggleUserModal(true)
                    }
                },
                formatter: function (value, row, index) {
                    var opers = [];
                    opers.push(`<a class="createExpense btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="生成报销单">
                                    <i class="fa fa-rocket"></i>
                                </a>`)
                    opers.push(`<a class="createExpenseForAddendum btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="补登">
                                    <i class="fa fa-car"></i>
                                </a>`)
                    opers.push(`<a class="authTo btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="委托办理">
                                    <i class="fa fa-share-alt"></i>
                                </a>`)
                    return opers.join('');
                }
            }],
            responseHandler: function (res) {
                return {
                    total: res.page.totalCount,
                    rows: res.page.list
                };
            },
            onLoadSuccess: function (data) {
                $('[data-toggle="tooltip"]').tooltip()
                let ids = [];
                pzcurmainToexpenseObj.mergeDatas.map(o => {
                    ids.push(o.id);
                })
                pzcurmainToexpenseObj.myTable.bootstrapTable('checkBy', {
                    field: 'id',
                    values: ids
                });
            },
            onCheck: function (row, ele) {
                pzcurmainToexpenseObj.addMergeData([row]);
            },
            onUncheck: function (row, ele) {
                pzcurmainToexpenseObj.removeMergeData([row]);
            },
            onCheckAll: function (rows) {
                pzcurmainToexpenseObj.addMergeData(rows);
            },
            onUncheckAll: function (rows) {
                pzcurmainToexpenseObj.removeMergeData(rows);
            }
        });
        pzcurmainToexpenseObj.myTableMerge = $('#pzcurmainToexpense_table_merge').bootstrapTable({
            toolbar: '#pzcurmainToexpense_table_merge_toolbar',
            formatNoMatches: function () {  //没有匹配的结果
                return '暂无数据';
            },
            columns: [{
                title: '#',
                align: 'center',
                width: 50,
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                title: '标题',
                field: 'title'
            }, {
                title: '金额',
                width: '80',
                field: 'money',
                formatter: function (value, row, index) {
                    return $.moneyFormat(value);
                }
            }]
        });
        pzcurmainToexpenseObj.myTableUser = $('#pzcurmainToexpense_table_user').bootstrapTable({
            toolbar: '#pzcurmainToexpense_table_user_toolbar',
            url: 'pz/cur/pzteacher',
            search: true,
            trimOnSearch: true,
            pagination: true,
            sidePagination: 'server',
            clickToSelect: true,
            formatNoMatches: function () {  //没有匹配的结果
                return '暂无数据';
            },
            columns: [{
                title: '#',
                align: 'center',
                width: 50,
                radio: true,
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                title: '姓名',
                field: 'name',
                width: 200,
            }, {
                title: '所属部门',
                field: 'deptName'
            }],
            responseHandler: function (res) {
                return {
                    total: res.page.totalCount,
                    rows: res.page.list
                };
            }
        });
        pzcurmainToexpenseObj.myModalUser.on('show.bs.modal', function (event) {
            pzcurmainToexpenseObj.myTableUser.bootstrapTable('resetSearch', '');
        })
        pzcurmainToexpenseObj.refreshDataList();
    })
    var pzcurmainToexpenseObj = new Object({
        selectId: undefined,
        mergeDatas: [],
        myTable: undefined,
        myTableMerge: undefined,
        myTableUser: undefined,
        myModalUser: $('#pzcurmainToexpense_Modal'),
        myQueryForm: $('#pzcurmainToexpense_Form'),
        addOrUpdateHandle: function () {
            $.mySwalConfirm("此功能仅用于手签事前请示单的报销,确定录入报销单?", function () {
                centerLoad("/web/pz/cur/pzcurmain-detail?dKey=expense", undefined, '费用报销', true, true)
            });
        },
        refreshDataList: function () {
            let formVals = this.myQueryForm.serializeArray();
            let data = {}
            for (let i = 0; i < formVals.length; i++) {
                if (formVals[i].value) {
                    data[formVals[i].name] = formVals[i].value;
                }
            }
            this.myTable.bootstrapTable('refresh', {
                url: '/pz/cur/pzmain/list/spending',
                pageNumber: 1,
                query: data
            })
        },
        resetDataList: function () {
            this.myQueryForm[0].reset();
            this.refreshDataList();
        },
        toggleUserModal: function (show) {
            this.myModalUser.modal(show ? 'show' : 'hide');
        },
        saveAuthHandler: function () {
            let _self = this;
            this.toggleUserModal(false);
            let selectUsers = this.myTableUser.bootstrapTable('getSelections');
            if (selectUsers.length == 0) {
                $.mySwalWarn("请选择人员");
                return;
            }
            $.mySwalConfirm(`确定将此单据委托给${selectUsers[0].name}?`, function () {
                $.myPut({
                    url: `/pz/cur/pzmain/saveAuth`,
                    dataType: 'json',
                    data: {
                        mainId: _self.selectId,
                        authToUserCode: selectUsers[0].workNo
                    },
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            _self.refreshDataList();
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            })
        },
        createExpenseHandle: function () {
            let _self = this;
            $.mySwalConfirm("确定生成报销单吗?", function () {
                $.myPost({
                    url: `/pz/cur/pzmain/saveForExpense`,
                    dataType: 'json',
                    data: [_self.selectId],
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            centerLoad(`web/pz/cur/pzcurmain-detail?dKey=expense&mainId=${data.mainId}`, undefined, "事后报销", true)
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            })
        },
        createExpenseForAddendumHandle: function () {
            let _self = this;
            $.mySwalConfirm("此功能仅用于手签事后报销单的䃼登,确定生成报销单吗?", function () {
                $.myPost({
                    url: `/pz/cur/pzmain/saveForExpenseAddendum`,
                    dataType: 'json',
                    data: [_self.selectId],
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            centerLoad(`web/pz/cur/pzcurmain-detail?dKey=expense&mainId=${data.mainId}`, undefined, "事后报销", true)
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            })
        },
        addMergeData: function (rows) {
            let _self = this;
            for (var i = 0; i < rows.length; i++) {
                let exist = false;
                for (var j = 0; j < _self.mergeDatas.length; j++) {
                    if (rows[i].id == _self.mergeDatas[j].id) {
                        exist = true;
                        break;
                    }
                }
                if (!exist) {
                    _self.mergeDatas.push({
                        id: rows[i].id,
                        title: rows[i].title,
                        money: rows[i].money
                    });
                }
            }
            this.myTableMerge.bootstrapTable('load', _self.mergeDatas);
        },
        removeMergeData: function (rows) {
            let _self = this;
            for (var i = 0; i < rows.length; i++) {
                for (var j = 0; j < _self.mergeDatas.length; j++) {
                    if (rows[i].id == _self.mergeDatas[j].id) {
                        _self.mergeDatas.splice(j, 1);
                        break;
                    }
                }
            }
            this.myTableMerge.bootstrapTable('load', _self.mergeDatas);
        },
        saveForExpenseMerge: function () {
            if (this.mergeDatas.length < 2) {
                $.mySwalWarn("最少需要选择2张单据进行合并");
                return;
            }
            let mainIds = [];
            this.mergeDatas.map(o => {
                mainIds.push(o.id);
            })
            $.mySwalConfirm("合并报销仅用于多份事前请示只有一张发票，确定生成报销单吗?", function () {
                $.myPost({
                    url: `/pz/cur/pzmain/saveForExpenseMerge`,
                    dataType: 'json',
                    data: mainIds,
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            centerLoad(`web/pz/cur/pzcurmain-detail?dKey=expense&mainId=${data.mainId}`, undefined, "事后报销", true)
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            })
        }
    })
</script>
</body>